<template>
    <lay-upload @done="doneHandle" :number="3" :listimages="localListimages" @update:listimages="handleListImagesUpdate"
        :size="1024 * 1024 * 3" acceptMime=".jpg, .jpeg, .png,.webp,.gif" :multiple="true" :drag="true">
        <template #preview>
            <div style="margin-top:0px;">
                <blockquote class="layui-elem-quote layui-quote-nm"
                    style="margin-top: 3px;margin-left: 0;height: 150px;">
                    <div style="margin-top: 2px;margin-left: 5px;">预览图：</div>
                    <div class="imgDiv" v-for="(img, index) in localListimages" :key="index" :id="'img' + index"
                        @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">
                        <img :src="img['imgsrc']" style="width:100px;height:120px;cursor: pointer"
                            @click="openimg(img['imgsrc'])">
                        <img v-show="showDelete[index]" src="@/assets/del.png" class="delete" @click="delimage(index)"
                            :id="'del' + index" style="cursor: pointer">
                    </div>
                </blockquote>
            </div>
        </template>
    </lay-upload>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { uploadImageApi } from '@/api/img';
import { layer } from '@layui/layui-vue';
const showDelete = ref([false])

//注册事件
const emits = defineEmits(['getImg', 'update:listimages'])
//子组件接收的参数类型
interface PropType {
    listimages: Array<{ imgsrc: string }>
};
//接收父组件传递的参数
const Props = withDefaults(defineProps<PropType>(), {
    listimages: () => []
});
const localListimages = ref(Props.listimages); // 初始化本地状态
const handleListImagesUpdate = (newImages: { imgsrc: string; }[]) => {
    // 更新本地状态
    localListimages.value = newImages;
    // 通知父组件
    emits('update:listimages', newImages);
};
//删除图片
const delimage = (ids: number) => {
    localListimages.value.splice(ids, 1);
    emits("getImg", localListimages.value);
    layer.msg('删除成功', { icon: 1, time: 1000 })
};

const mouseOver = (index: number) => {
    showDelete.value[index] = true
};
const mouseLeave = (index: number) => {
    showDelete.value[index] = false
};

//预览图片
const openimg = (imgsrc: string) => {
    layer.photos({
        type: 5,
        title: '图片预览',
        imgList: [{ src: imgsrc, alt: "预览图片" }],
        shade: true,
        shadeOpacity: '0.6',
        shadeClose: true,
        anim: 2,
        area: ['100%', '100%']
    });
};
//图片提交
const doneHandle = (file: any) => {
    const formData = new FormData()
    formData.append('file', file.data[0])
    uploadImageApi(formData).then((res) => {
        if (localListimages.value.length >= 3) {
            layer.msg('图片数量超出限制,最多上传3张图片', { icon: 3, time: 1000 })
        } else {
            if (res && res.code == 200) {
                const imgUrl = process.env.BASE_API + res.data;
                localListimages.value.push({ imgsrc: imgUrl })
                emits("getImg", localListimages.value);
                console.log(localListimages.value)
                layer.msg('上传成功', { icon: 1, time: 1000 })
            } else {
                layer.msg('上传失败', { icon: 2, time: 1000 })
            }
        }

    })
};
</script>
<style lang="scss" scoped>
.imgDiv {
    display: inline-block;
    position: relative;
    border: 1px solid #C1C1C1;
    margin: 5px;

    .delete {
        position: absolute;
        top: 0px;
        right: 0px;
    }
}
</style>